<template>
  <div>
    <div class="wrap_mv">
      <div class="ret">
        <div class="ret-left"  @click="$router.go(-1)">
          <span class="iconfont icon-fanhui1"></span>返回
        </div>
        <div class="ret-right" @click="likemv">
          收藏MV<span v-if="subed==true" class="red iconfont icon-shoucang"></span>
          <span v-else class="iconfont icon-shoucang"></span>
        </div>
      </div>
      <div class="video-box" v-if="uid">
        <video :src="uid.url" controls></video>
      </div>

      <div class="mvid_box">
        <div class="mv">
          <van-tabs v-model="active">
            <van-tab title="相似MV">
              <ul>
                <li
                  class=""
                  v-for="item in mvlist"
                  :key="item.id"
                  @click="setid(item.id)"
                >
                  <div class="img">
                    <img :src="item.cover" />
                    <div class="play iconfont icon-bofang"></div>
                  </div>
                  <div class="right">
                    <div class="name">
                      <p class="item_name">{{ item.name }}</p>
                      <p class="artistName">{{ item.artistName }}</p>
                    </div>
                    <div class="playnum">
                      播放量：<span>{{ item.playCount | playCount }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </van-tab>
            <van-tab title="评论">
              <div class="commentall">
                <div class="title">
                  <!-- <div class="section">评论区</div> -->
                  <div class="sections">
                    <!-- <span class="con">推荐</span> -->
                    <span :class="{ 'con': cutnum == 1 }" @click="cutnum = 1"
                      >最新</span
                    >
                    <span :class="{ 'con': cutnum == 2 }" @click="cutnum = 2"
                      >最热</span
                    >
                  </div>
                </div>
                <!-- 评论区 -->
                <div class="commentlist">
                  <div v-show="cutnum == 1" class="newcomment">
                    <div
                      class="item"
                      v-for="item in comment"
                      :key="item.commentId"
                    >
                      <div class="top">
                        <div class="mess">
                          <div class="userimg">
                            <img :src="item.user.avatarUrl" alt="" />
                          </div>
                          <div class="name">
                            <p class="user">{{ item.user.nickname }}</p>
                            <p class="time">{{ item.timeStr }}</p>
                          </div>
                        </div>
                        <div class="give"  @click="addlike({id:item.commentId,liked:item.liked},$event)">
                          {{ item.likedCount }}
                          <span
                            v-if="!item.liked"
                            class="iconfont icon-dianzan"
                          ></span>
                          <span v-else class="red iconfont icon-dianzan"></span>
                        </div>
                      </div>
                      <div class="content">
                        <p>{{ item.content }}</p>
                      </div>
                      <!-- <div class="del">
                    <span class="del">删除</span>
                  </div> -->
                    </div>
                  </div>

                  <div v-show="cutnum == 2" class="hotcomment">
                    <div
                      class="item"
                      v-for="item in hotcomment"
                      :key="item.commentId"
                    >
                      <div class="top">
                        <div class="mess">
                          <div class="userimg">
                            <img :src="item.user.avatarUrl" alt="" />
                          </div>
                          <div class="name">
                            <p class="user">{{ item.user.nickname }}</p>
                            <p class="time">{{ item.timeStr }}</p>
                          </div>
                        </div>
                        <div class="give" @click="addlike({id:item.commentId,liked:item.liked},$event)">
                          {{ item.likedCount }}
                          <span v-if="!item.liked" class="iconfont icon-dianzan"></span>
                          <span v-else class="red iconfont icon-dianzan"></span>
                        </div>
                      </div>
                      <div class="content">
                        <p>{{ item.content }}</p>
                      </div>
                      <!-- <div class="del">
                    <span class="del">删除</span>
                  </div> -->
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
        </div>
      </div>

      <div class="mycomment">
        <div class="box">
          <input type="text" v-model="content" placeholder="写评论..." />
          <button @click="addMyComment">发表</button>
          <svg>
            <use xlink:href="#icon-qiatongxingxiang"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { getMvurl, getSimimv, getCommentMv ,getMyComment,getCommentlike,getMvsub} from "../../api/mv";
getCommentlike
export default {
  created() {
    // console.log(this.$route);
    let mvid = this.$route.query.id;
    this.subed = this.$route.query.subed  //歌单收藏状态
    console.log(this.subed)

    this.mid = mvid
    // console.log(this.mid)

    getMvurl({ id: mvid }).then((data) => {
      this.uid = data.data;
    });

    //获取评论
    getCommentMv({ id: mvid }).then((data) => {
      this.comment = data.comments;
      console.log(this.comment);
      this.hotcomment = data.hotComments;
    });

    //获取相似列表
    getSimimv({ mvid: mvid }).then((data) => {
      this.mvlist = data.mvs;
      console.log(data)
    });
  },

  data() {
    return {
      uid: [],
      mvlist: [],
      active: 2,
      cutnum: 1,
      comment: [], //最新
      hotcomment: [], //最热评论
      recomment: [], //推荐
      content:"",//评论内容
      mid:"",
      subed: "",
    };
  },

  methods: {
    setid(id) {
      this.mid = id
      // console.log(this.mid)
      getMvurl({ id: id }).then((data) => {
        this.uid = data.data;
      });
      getSimimv({ mvid: id }).then((data) => {
        this.mvlist = data.mvs;
      });

      getCommentMv({ id: id }).then((data) => {
        this.comment = data.comments;
        this.hotcomment = data.hotComments;
      });
    },
    
    addMyComment(){
      if(this.content == "")return
      // console.log(this.content)
      // console.log(this.mid)
      getMyComment
      getMyComment({t:1,type:1,id:this.mid,content:this.content}).then(data=>{
        console.log(data)
      })
      Toast("发表评论成功")
      this.content = ""
    },

//点赞
    addlike(obj,event){
      let num = null
      num = obj.liked == true? 0 : 1
      // console.log(num)
      getCommentlike({id:this.mid,cid:obj.id,t:num,type:1})
      if(event.target.classList.contains('red')){
          event.target.classList.remove('red')
      }else{
          event.target.classList.add('red')
      }
    },

    likemv(){
      getMvsub()
      // console.log(this.mid)
      let sub = null;
      // sub = this.subed==true?0:1 
      if(this.subed==true){
        sub = 0
        Toast("取消收藏")
        //  console.log(this.subed)
        this.subed = false
      }else{
        sub = 1
        Toast("收藏成功")
        // console.log(this.subed)
        this.subed = true
      }
      getMvsub({mvid:this.mid,t:sub}).then(data=>{
        console.log(data)
      })
    }

  },
  filters: {
    playCount(value) {
      let w = value > 10000 ? (value / 10000).toFixed(1) : value;
      let hm = w > 10000 ? (w / 10000).toFixed(1) + "亿" : w + "万";
      return hm;
    },
  },
};
</script>

<style lang="less">
.ret {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  background-color: #f6f6f6;
  color: #505050;
  font-size: 14px;
  box-sizing: border-box;
  color: #9e9e9e;
  .ret-right {
    margin-right: 5px;
    span {
      font-size: 18px;
      color: #9e9e9e;
    }
    .red{
      color: red;
    }
  }
}
.video-box {
  background-color: #f6f6f6;
  video {
    width: 100%;
  }
}

.van-tabs__nav--line {
  background-color: #f6f6f6;
}
.mvid_box {
  background-color: #f6f6f6;
  .mv_type {
    font-size: 13px;
    padding: 15px;
    li {
      color: #565658;
      span {
        display: inline-block;
        margin-right: 10px;
        padding: 4px;
        color: #6a6969;
        position: relative;
      }
      span:after {
        content: "";
        position: absolute;
        display: inline-block;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 10px;
        margin-left: 8px;
        background-color: #6a6969;
      }
      span:last-child::after {
        content: none;
      }
    }
  }
  .mv {
    width: 100%;
    padding: 5px;
    height: 100%;
    padding-bottom: 40px;
    box-sizing: border-box;
    ul {
      display: flex;
      flex-direction: column;
      li {
        display: flex;
        padding: 15px 5px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 8px;
        margin-top: 10px;
        .img {
          width: 45%;
          height: 102px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .play {
            position: absolute;
            color: #fff;
            font-size: 50px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }

        .right {
          flex: 1;
          margin-left: 10px;
          .playnum {
            font-size: 12px;
            margin-top: 8px;
            span {
              color: #9e9e9e;
            }
          }

          .name {
            font-size: 14px;
            line-height: 20px;
            margin-top: 10px;
            .item_name {
              width: 90%;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
            .artistName {
              font-size: 12px;
              color: #6a6969;
            }
          }
        }
      }
    }
  }
}

.commentall {
  background-color: #fff;
  font-size: 13px;
  position: relative;
  height: 100%;
  .title {
    display: flex;
   justify-content: flex-end;
    margin-top: 10px;
    //   .section {
    //     font-size: 15px;
    //     color: #2f2f2f;
    //   }
    .sections {
      height: 30px;
      line-height: 30px;
      span {
        margin: 0 8px;
        color: #9f9f9f;
        font-size: 14px;
      }
      span.con {
        color: #333;
      }
    }
  }

  .commentlist {
    .item {
      width: 100%;
      .top {
        width: 100%;
        display: flex;
        padding: 0 10px;
        margin-top: 25px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        .mess {
          // width: 90%;
          display: flex;
          align-items: center;
          .userimg {
            width: 40px;
            height: 40px;
            background-color: #565658;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              display: block;
            }
          }
          .name {
            // width: 28%;
            margin-left: 8px;
            .user {
              font-size: 14px;
              color: #8b8b8b;
            }
            .time {
              transform: scale(0.9);
              font-size: 12px;
              color: #909090;
            }
          }
        }
        .give {
          color: #bdbdbd;
          .red {
            color: red;
          }
        }
      }
      .content {
        width: 100%;
        margin-top: 8px;
        padding: 0 10px 14px 10px;
        box-sizing: border-box;
        p {
          margin-left: 48px;
          word-wrap: break-word;
          word-break: break-all;
          overflow: hidden;
          text-align: justify;
        }
      }
      .del {
        text-align: right;
        padding: 0 5px;
        box-sizing: border-box;
        color: #bdbdbd;
      }
    }
  }
}

.mycomment {
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: center;
  .box {
    width: 100%;
    position: relative;
    font-size: 13px;
    input {
      width: 100%;
      padding: 10px;
      border: none;
      box-sizing: border-box;
    }
    button,
    svg {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      background: #fff;
      border: none;
      color: #d2d2d2;
    }
    svg {
      width: 17px;
      height: 17px;
      right: 49px;
    }
  }
}
</style>